<template>
	<view>
		<view class="ul" v-for="(item, index) in initData" :key="index">
			<view class="li">
				<text>媒体类型：</text>
				{{ item.mediaTypeName }}
			</view>
			<view class="li">
				<text>媒体名称：</text>
				{{ item.plateformName }}
			</view>
			<view class="li">
				<text>预约开始时间：</text>
				{{ item.startOrderDate }}
			</view>
			<view class="li">
				<text>投放时间：</text>
				{{ item.launchDate }}
				<text class="right" @click="go_details(item.id)">查看详情</text>
			</view>
		</view>
		
		<view v-if="initData.length==0" class="notavailable">
			<image src="../../../static/img/notavailable.png" mode="widthFix"></image>
			<view class="nottext">暂时没有数据</view>
		</view>
		<view class="pagination" v-if="pagination">
			<view class="left" :class="{ forbid: paging.page == 1 }" @click="prev">
				<uni-icons type="arrowleft" size="20" color="#fff" class="icons" />
				上一页
			</view>
			<view class="center">{{ paging.page }}/{{ paging.total }}</view>
			<view class="right" :class="{ forbid: paging.page == paging.total }" @click="next">
				下一页
				<uni-icons type="arrowright" size="20" color="#fff" class="icons" />
			</view>
		</view>
		<view class="go-top" v-show="is_go_top" @click="backTop"><image src="/static/img/go_top.png" /></view>
	</view>
</template>

<script>
import { uniIcons } from '@dcloudio/uni-ui';
import advertising from '../../../servers/agent/advertising/advertising.js';
export default {
	components: { uniIcons },
	data() {
		return {
			is_go_top: false,
			paging: {
				page: 1,
				total: 100
			},
			flag: '',
			initData: [],
			pagination:true
		};
	},
	onPageScroll: function(e) {
		//nvue暂不支持滚动监听，可用bindingx代替
		if (e.scrollTop > 200) {
			this.is_go_top = true;
		} else {
			this.is_go_top = false;
		}
	},
	mounted() {
		var _this = this;
		uni.getStorage({
			key: 'agentadvertisinglist',
			success: function(res) {
				_this.flag = res.data;
				console.log();
				_this.getdata();
			}
		});
		// this.getdata();
	},
	methods: {
		getdata() {
			uni.showLoading({
				title: '数据加载中',
				mask: true
			});
			/* TODO status 需要重新进行判定 */
			var obj = {
				adsType: this.flag,
				// staus: 1,
				 currentPage:this.paging.page,
				 pageSize: 10
			};
			advertising
				.agreeList(obj)
				.then(res => {
					if(res.code==200){
						if(res.data.records.length>0){
							this.paging.total = Math.ceil(res.data.total / res.data.size);
							this.initData = res.data.records;
							this.pagination=true
						}else{
							this.pagination=false
						}
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					
					uni.hideLoading();
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		go_details(e) {
			uni.setStorage({
				key: 'advertisingdetails',
				data: e,
				success: function() {
					uni.redirectTo({
						url: '/pages/agent/advertising/details'
					});
				}
			});
		},
		// 计算距离顶部的高度，均分10等分，
		backTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 200
			});
		},
		next() {
			if (this.paging.page < this.paging.total) {
				this.paging.page += 1;
				this.getdata();
			}
		},
		prev() {
			if (this.paging.page > 1) {
				this.paging.page -= 1;
				this.getdata();
			}
		}
	}
};
</script>

<style lang="less" scoped>
.ul {
	margin: 34rpx 20rpx;
	background: #fff;
	padding: 0 20rpx;
	border-radius: 20rpx;
	box-shadow: 5rpx 0px 20rpx #c5c5c5;
	.li {
		position: relative;
		border-bottom: 1px solid #efefef;
		line-height: 109rpx;
		color: #999999;
		font-size: 26rpx;
		text {
			display: inline-block;
			width: 200rpx;
			color: #333333;
			font-size: 28rpx;
		}
		.right {
			position: absolute;
			right: 20rpx;
			width: 160rpx;
			line-height: 60rpx;
			font-size: 26rpx;
			margin-top: 25rpx;
			color: #f70225;
			border: 1px solid #f70225;
			border-radius: 40rpx;
			text-align: center;
		}
	}
	.li:nth-last-child(1) {
		border-bottom: none;
	}
}
</style>
